<template>
  <div class="flex-grow">
    <div class="flex-middle-center flex-grow font-xl mb-1">
      <b :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</b>
      <small class="text-grey mx-4">VS</small>
      <b :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></b>
    </div>

    <div class="d-flex flex-wrap" :class="m.ttg.isBetOne ? 'sg' : 'bt-l bl-l'">
      <div class="g box-lg py-2" :class="on('zjq|' + (e - 1))" @click="select('zjq|' + (e - 1))" v-for="e in 7">
        <strong>{{e - 1}}</strong>
        <small class="text-grey">{{m.ttg['s' + (e - 1)]}}</small>
      </div>
      <div class="g box-lg py-2" :class="on('zjq|7')" @click="select('zjq|7')">
        <strong>7+</strong>
        <small class="text-grey">{{m.ttg['s7']}}</small>
      </div>
    </div>
  </div>
</template>

<script>
import { mixin } from './calculator'

export default {
  name: 'layout-zjq',
  mixins: [mixin]
}
</script>
